<template>
  <div class="mask-black-dialog">
    <div class="m-confirm">
      <template>
        <div class="confirm-hd" v-if="title">
          <div class="confirm-title" v-html="title"></div>
          <div class="confirm-icon"><span class="k-block" :class="{'loginColor': loginVue }"></span></div>
        </div>
        <div class="confirm-hd-1 k-block" :class="{'loginColor': loginVue }" v-else>
        </div>
      </template>
      <div class="k-close" :class="{closeColor: closeObj.closeColor}" @click.stop="closeConfirm(false, closeObj.callback)" v-if="closeObj && closeObj.close"></div>
      <div class="confirm-bd" v-html="mes" :style="{color:`${mesColor}`}" :class="{nopadding: (tip || (closeObj && closeObj.closeColor)), 'padding-mes': subMes }"></div>
      <div class="confirm-bd submes" v-html="subMes" :style="{color:`${subMesColor}`}":class="{nopadding: (tip || (closeObj && closeObj.closeColor)) }"></div>
      <div class="donate-content" v-if="donateFlag">
        <div>公益项目：中国扶贫基金会捐一元项目</div>
        <div>活动时间：<div>餐厅募捐：2018年8月11日至2018年8月31日</div>
        <div>网上订餐系统募捐：2018年8月11日至2018年9月10日</div>
        </div>
        <div>项目介绍：<div>“捐一元”项目是2008年由中国扶贫基金会联合肯德基所属的百胜中国共同发起，倡议全社会一人捐一元钱，帮助贫困地区孩子们健康成长。项目十年来累计筹集善款超过1.7 亿人民币，其中百胜中国及员工捐款超过3500万；累计超过1.1亿人次消费者在百胜中国旗下餐厅直接参与捐款。截至2017年12月底，项目累计为贫困地区小学生提供3740多万份营养加餐，为860所贫困山区学校捐赠“爱心厨房设备”，累计受益学生超过54.7万人次。</div></div>
        <div>2018年8月，中国扶贫基金会再次携手百胜中国第十一年发起“捐一元•献爱心•送营养”项目，为这些孩子的成长助力。经中国扶贫基金会同意，2018年度捐一元项目同步开放肯德基超级APP等网上订餐平台捐款渠道。经过系统设置，消费者通过网上订餐平台捐款后，收银系统会自动将营业收入与捐款额区分开。项目结束后，公司财务汇总全部善款并统一汇款至中国扶贫基金会。同时，百胜中国已经率先捐出200万元，号召更多的消费者奉献爱心。捐一元项目管理费由百胜中国承担，消费者所捐善款将全部用于项目执行。</div>
        <div>中国扶贫基金会已于2018年5月在民政部全国慈善信息公开平台——“慈善中国”网站进行“2018年‘捐一元•献爱心•送营养’项目”活动备案，备案号码为：5310000050000784XYA18058</div>
        <div>票据说明：<div>如需开具捐赠票据，请保留捐款凭证（小票、捐款页面截图等），并联系餐厅工作人员留下个人信息（姓名、地址和电话），中国扶贫基金会将为您开具个人捐赠票据，并统一以快递方式寄出。</div></div>
      </div>
      <template v-if="typeof opts == 'function'">
        <div class="confirm-ft">
          <a href="javascript:;" class="confirm-btn primary" :class="{'loginColor': loginVue }" @click.stop="closeConfirm(false, opts)">确定</a>
          <a href="javascript:;" class="confirm-btn default" :class="{'loginColor': loginVue }" @click.stop="closeConfirm(false)">取消</a>
        </div>
      </template>
      <template v-else>
        <div class="confirm-ft " :class="{'bigBtn': tip }">
          <a href="javascript:;"  class="confirm-btn" v-for="(item, index) in opts" :key='index' :class="[typeof item.color == 'boolean' ? (item.color ? 'primary' : 'default') : 'default', item.colorStyle ? 'colorStyle' : '', loginVue ? 'loginColor' : '']"  :style="{color: item.color}" @click.stop="closeConfirm(item.stay, item.callback)">{{item.txt}}</a>
        </div>
      </template>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    props: {
      loginVue: {
        type: Boolean,
        default: false
      },
      title: String,
      closeObj: {
        type: Object
      },
      mes: String,
      subMes: String,
      donateFlag: {
        type: Boolean,
        default: false
      },
      tip: {
        type: Boolean,
        default: false
      },
      mesColor: String,
      subMesColor: String,
      opts: {
        type: [Array, Function],
        default: () => {
        }
      }
    }
  }
</script>
<style lang="less">
  .no-car{
    border-bottom: 1px solid #e8e5e5;/*no*/
    border-top: 1px solid #e8e5e5;/*no*/
    padding: 4px 0 20px 0;
    color: #a5a5a5;
    font-size: 28px;/*px*/
    font-weight: 400;
    width: 100%;
  }
  .invalid{
    color: #000;
    font-size: 32px;/* px */
  }
 .goods-list{
   width: 100%;
   color: #a5a5a5;
   font-size: 28px;/*px*/
   padding: 40px 80px;
   overflow-y: auto;
   text-align: left;
   font-weight: 400;
   max-height: 300px;/*px*/
 }
  .mes-child{
      font-weight: 500!important;
      color: #808080;
      margin-top: 20px;
    }
    .confirm-content{
      padding-top: 20px;
      color: #808080;
      font-weight: 500;
      .k-money{
         font-size: 28px;/*px*/
      }
    }
</style>
<style lang="less" scoped>
  @keyframes myshow {
    from {
      transform: scale(0, 0);
    }
    to {
      transform: scale(1, 1);
    }
  }

  .m-confirm {
    width: 90%;
    min-height: 300px;
    background: #FFFFFF;
    border-radius: 12px;
    font-size: 30px;/*px*/
    animation: myshow .5s;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }

  .confirm-title {
    font-size: 36px;/*px*/
    color: #95b04c;
    text-align: center;
    border-radius: 10px;
    flex:1;
    display: flex;
    justify-content: center;
  }

  .k-block{
    font-size: 80px;/*px*/
    bottom: 0;
  }
  .loginColor:before{
    color: #d93035;
  }
  .confirm-icon{
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    transform: rotate(180deg);
    width: 120px;
    left: 50%;
    margin-left: -60px;
  }

  .confirm-hd {
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #dfdfdf;/*no*/
    position: relative;
  }
  .confirm-bd.padding-mes{
    padding:40px 0 0 0;
  }

  .confirm-hd-1 {
    border-radius: 10px;
    height: 20px;
    text-align: center;
    position: relative;
    &.k-block{
      font-size: 100px;/*px*/
    }
    &.loginColor:before{
      color: #d93035;
    }
  }
  .tip{
    color: #000;
    text-align:center;
    font-size: 32px;/*px*/
    font-weight: 700;
    padding: 10px 0 0 0;
    border-bottom: 2px solid #efefef;/* px */
  }

  .confirm-bd {
    font-size: 32px;
    /* px */
    word-break: break-all;
    flex: 1;
    padding: 40px 40px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #404040;
    line-height: 48px;
    &.nopadding{
      padding: 0;
    }
  }
  .confirm-bd.submes{
    font-size:24px;
    padding:0;
  }

  .confirm-ft {
    color: #FFF;
    height: 100px;
    line-height: 100px;
    font-size: 32px;/* px */
    border-radius: 0 0 12px 12px;
    position: relative;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    >a {
      position: relative;
      text-align: center;
      display: block;
      width: 244px;
      line-height: 90px;
      height: 90px;
      border-radius: 10px;
      &.confirm-btn.default {
        border: 1px solid #ccc;/* no */
        background: 0 0 !important;
        color: #95b04c;
        box-shadow: 0 0 8px rgba(0, 0, 0, .05);
        flex: 1;
        margin: 0 10px;
      }
      &.confirm-btn.primary {
        background-color: #95b04c;
        border-radius: 10px;
        box-shadow: 0 0 6px rgba(0, 0, 0, .2);
        border: 1px solid #95b04c;/* no */
        color: #fff !important;
        flex: 1;
        margin: 0 10px;
      }
      &.confirm-btn.loginColor{
        background-color: #d93035;
        color: #d93035;
        border: 1px solid #d93035;/* no */
      }
    }
  &.bigBtn{
    margin-top: 0;
    >a {
      width:512px;
    }
  }
}
 .k-close{
    color: #d93035;
    padding: 12px 30px 0;
    text-align: right;
    font-size: 30px;/* px */
    &.closeColor{
      color: #808080;
    }
  }
  .donate-content{
    max-height: 500px;
    overflow: auto;
    padding: 0 65px;
    >div{
      color:#808080;
      margin-bottom: 46px;
    }
  }
  .colorStyle{
     color: #808080 !important;
  }
</style>
